<template>
	<view class="main">
		<view class="calendar">
			<calen :actDay="actDay" :chooseDay="chooseDay" @onDayClick='onDayClick' @dateMessage="yearMonth"></calen>
		</view>
	</view>
</template>

<script>
	export default {
		data: function() {
			return {
				year: '',
				month: '',
				actDay: [], //用户选择的日期
				chooseDay: ["2023-04-13", "2023-04-15", "2023-04-16", "2023-04-05"], //已被投标的数据
				// choosedate:['2024-04-25','2024-04-24']
				// choosedate:[{date: '2024-04-25',other:'1'},
				// 			{date: '2024-04-21',other:'2'}],
				choosedate: [],

			}
		},
		mounted: function() {
			// this.choosedate.forEach(item=>{
			// 	  this.actDay.push(item.date)
			// 	  },
			// 	);
			// this.actDay.push('2024-5-1');
		},
		watch: {
			// choosedate(newVal,oldVal){
			// 	this.choosedate.forEach(item=>{
			// 		  this.actDay.push(item.date)
			// 		  }
			// 		);
			// }
		},
		// onLoad() {
		// 	this.$emit('chooseDate',this.actDay)
		// },
		methods: {
			// 请求当前月数据接口
			yearMonth(msg) {
				console.log(this.actDay);
				this.year = msg.year;
				this.month = msg.month;
				console.log(this.year + '年');
				console.log(this.month + '月');
				uni.request({
					url: 'http://172.26.67.139:8887/ep/menstrual-period-calendar/getMonthRecord',
					method: 'GET',
					data: {
						year: this.year,
						month: this.month
					},
					header: {
						'Authori-zation': '123456' //自定义请求头信息
					},
					success: (res) => {
						// this.choosedate=res.data.data;
						// this.choosedate.forEach(item=>{
						// 	item.date=item.year+'-'+item.month+'-'+item.day;
						// });
						// console.log(this.choosedate)
						// this.actDay.push('2024-5-1');
						// this.choosedate.push({date: '2024-04-22',other:'2'});
						console.log(this.actDay);
						this.choosedate = [];
						res.data.data.forEach(item => {
							if (item.month.length == 1) {
								item.month = '0' + item.month
							};
							if (item.day.length == 1) {
								item.day = '0' + item.day
							};
							this.choosedate.push({
								date: item.year + '-' + item.month + '-' + item.day,
								other: 1
							})
							// this.$set(this.choosedate, 'date', item.year+'-'+item.month+'-'+item.day);
						});
						console.log(this.choosedate);
						this.choosedate.forEach(item => {
							this.actDay.push(item.date)
						}, );
						// console.log(this.choosedate)
					},
					fail: (err) => {
						console.log(err);
					}
				});
			},
			// 展开日历
			onDayClick(data) {
				let choose = data.date //用户点中的数据
				// console.log(data.date)
				this.$emit('chooseDate', data.date)
				if (this.actDay.includes(choose)) { //如果用户点击的日期已经存在
					// 移除元素下标
					const index = this.actDay.indexOf(choose);
					//删除用户点击的日期
					this.actDay.splice(index, 1)
				} else if (this.chooseDay.includes(choose)) { //判断是否已经被投标
					uni.showToast({
						title: "这个日期已经被投标了",
						icon: "none"
					})
				} else {
					//添加用户点击的日期
					this.actDay = []
					this.actDay.push(choose)
				}
			},
			// sendDate(){
			// 	this.$emit('chooseDate',this.actDay)
			// }
		}
	}
</script>

<style scoped lang="scss">
	.main {
		width: 750rpx;
		display: flex;
		flex-direction: column;
		// background: red;
		// height: 1050rpx;
		// margin: 10rpx 30rpx 0 30rpx;
		// border-radius: 20rpx;
	}

	.calendar {
		width: 690rpx;
		display: flex;
		flex-direction: column;
		// justify-content: center;
		// align-items: center; 
		margin: 20rpx auto;
	}
</style>